<template>
  <div class="lk-transfer">

    <div class="left-item">
      <div class="input-item">
        <el-input
          :placeholder="leftPlaceholder"
          v-model="inputValue"
          clearable
          @input="changeSearch"
        >
        </el-input>
      </div>
      <div class="scoll-item">
        <div
          :class="[{'banClick': item.banClick},'for-item']"
          v-for="item in afterFilter"
          :key="item[rowKey]"
          @click="push(item, item.banClick)">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="right-item">
      <div class="title-item">
        <span>{{ rightText }}</span>
      </div>
      <div class="scoll-item">
        <div
          class="for-item"
          v-for="(item,rowIndex) in value"
          :key="item[rowKey]">
          <span>{{ item.name }}</span>
          <i class="el-icon-circle-close" @click="del(item, rowIndex)"></i>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'LkTransfer',
  props: {
    data: { // 左边源数据
      type: Array,
      default: function () {
        return [];
      }
    },
    value: { // 左边选中数据
      type: Array,
      default: function () {
        return [];
      }
    },
    leftPlaceholder: {
      type: String,
      default: '请输入您要搜索的内容'
    },
    rightText: {
      type: String,
      default: ''
    },
    banNum: {
      type: Number,
      default: 100
    },
    rowKey: {
      type: String,
      default: 'key'
    }
  },
  components: {},
  // 定义属性
  data () {
    return {
      inputValue: '',

      rightData: this.value
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    afterFilter () {
      const that = this;
      return this.data.filter(source => _.findIndex(this.rightData, function (o) {
        return o[that.rowKey] === source[that.rowKey];
      }) === -1);
    }
  },
  // 方法集合
  methods: {
    push (item, banClick = false) {
      if (banClick) {
        this.$message.error(`该数据已存在`);
        return;
      }

      if (this.value.length >= this.banNum) {
        this.$message.error(`单次只能新增${this.banNum}条数据`);
        return;
      }

      this.rightData.push(item);

      this.$emit('input', this.rightData);
    },
    // 移除数据
    del (item, index) {
      this.rightData.splice(index, 1);

      this.$emit('input', this.rightData);
    },

    // 左边源数据搜索
    changeSearch (value) {
      this.$emit('changeSearch', value);
    },

    // 重置
    reset () {
      this.inputValue = '';
      this.rightData = [];
      this.$emit('input', this.rightData);
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
div::-webkit-scrollbar {
  width: 0;
}
.lk-transfer{
  width: 100%;
  height: 300px;
  display: flex;
  user-select: none;
  .left-item{
    flex: 1;
    border-right: 1px solid rgba(243,245,252,1);
    display: flex;
    flex-direction: column;
    .input-item{
      width: 320px;
      margin-bottom: 15px;
      height: 32px;
      display: flex;
      align-items: center;
      ::v-deep .el-input__inner{
        border: 1px solid rgba(216,220,230,1);
      }
    }
    .scoll-item{
      .for-item{
        cursor:pointer;
        span{
          margin-left: 20px;
        }
      }
      .banClick.for-item{
        span{
          color: #909399;
          cursor: not-allowed;
        }
      }
    }
  }
  .right-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    .title-item{
      width: 320px;
      margin-bottom: 15px;
      height: 32px;
      display: flex;
      align-items: center;
    }
  }
  .scoll-item{
      flex: 1;
      overflow-y: scroll;
      .for-item{
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #555555;
          font-weight: 400;
        }
        i{
          font-weight: 700;
          font-size: 16px;
          color: #222429;
          cursor:pointer;
        }
      }
    }
}
</style>
